<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scorecardpipeline环境安装</title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.0.min.js"></script>
</head>
<body>
  <style>
    .quick-start {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      margin-bottom: 20px;
    }
  
    .title-column {
      flex-grow: 0;
      margin-right: 10px;
    }
  
    .content-column {
      flex-grow: 1;
    }
  
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: fit-content;
    }
  
    .title-column div, .row div {
      white-space: nowrap;
    }
  
    .title-column div {
      padding: 14px 10px 12px 0;
      font-weight: 700;
    }
  
    .row div {
      flex-grow: 1;
      text-align: center;
      margin: 2px;
      padding: 12px 0 10px 0;
      background: rgba(102, 54, 234,0.1);
      cursor: pointer;
    }
    
    .row div.selected {
      background: rgba(102, 54, 234,0.9);
      color: #ffffff;
    }
  
    #command {
      margin: 2px 0px 1rem -11px;
      padding: 17px 3px 14px 16px;
      background: rgba(102, 54, 234,0.1);
      box-shadow: 0 8px 32px 0 rgba(102, 54, 234,0.1);
      backdrop-filter: blur( 20px );
      -webkit-backdrop-filter: blur( 20px );
      border-radius: 0;
      border: 1px solid rgba( 255, 255, 255, 0.18 );
      width: 99.6%;
    }
  
    #command pre {
      background: none;
      border: none;
      white-space: pre-wrap; 
      word-wrap: break-word; 
      padding: 0;
      margin: 0;
    }
  
  </style>
  
  <div class="quick-start">
    <div class="title-column">
        <div>系统环境</div>
        <div>PIPY镜像</div>
        <div>网络环境</div>
        <div>安装命令</div>
    </div>
    <div class="content-column">
      <div class="row" id="os" style="width: 100%;"></div>
      <div class="row" id="pipy" style="width: 100%;"></div>
      <div class="row" id="line" style="width: 100%;"></div>
      <div class="row" id="command"><pre style="width: 100%;"></pre></div>
    </div>
  </div>
  
  <script>
    var osList = [
      ['linux', 'Linux'],
      ['mac', 'Mac'],
      ['windows', 'Windows'],
    ];
  
    var pipyList = [
      ['github', '源码'],
      ['aliyun', '阿里'],
      ['nouse', '纯净'],
      ['office', 'PIPY'],
    ];

    var netList = [
      ['online', '在线'],
      ['offline', '离线'],
    ];
  
    osList.forEach(x => $("#os").append(`<div id="${x[0]}" style="width: ${(100-2*(osList.length-1))/osList.length}%;">${x[1]}</div>`));
    pipyList.forEach(x => $("#pipy").append(`<div id="${x[0]}" style="width: ${(100-2*(pipyList.length-1))/pipyList.length}%;">${x[1]}</div>`));
    netList.forEach(x => $("#line").append(`<div id="${x[0]}" style="width: ${(100-2*(netList.length-1))/netList.length}%;">${x[1]}</div>`));
  
    function updateCommand() {
      var os = $("#command").attr("os");
      var pipy = $("#command").attr("pipy");
      var line = $("#command").attr("line");

      if (pipy == "office") {
        if (line == "offline") {
          $("#command pre").text('# 在线环境中运行\npip download -d site-packages/ scorecardpipeline -i https://pypi.org/simple\n# 离线环境运行\npip install --no-index --find-links=site-packages scorecardpipeline');
        }
        else {
          $("#command pre").text(`pip install scorecardpipeline -i https://pypi.org/simple`);
        }
      }
      else if (pipy == "aliyun") {
        if (line == "offline") {
          $("#command pre").text('# 在线环境中运行\npip download -d site-packages/ scorecardpipeline -i https://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com\n# 离线环境运行\npip install --no-index --find-links=site-packages scorecardpipeline');
        }
        else {
          $("#command pre").text(`pip install scorecardpipeline -i https://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com`);
        }
      }
      // else if (pipy == "tsinghua") {
      //   if (line == "offline") {
      //     $("#command pre").text('# 在线环境中运行\npip download -d site-packages/ scorecardpipeline -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn\n# 离线环境运行\npip install --no-index --find-links=site-packages scorecardpipeline');
      //   }
      //   else {
      //     $("#command pre").text(`pip install scorecardpipeline -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn`);
      //   }
      // }
      // else if (pipy == "douban") {
      //   if (line == "offline") {
      //     $("#command pre").text('# 在线环境中运行\npip download -d site-packages/ scorecardpipeline -i https://pypi.doubanio.com/simple --trusted-host pypi.doubanio.com\n# 离线环境运行\npip install --no-index --find-links=site-packages scorecardpipeline');
      //   }
      //   else {
      //     $("#command pre").text(`pip install scorecardpipeline -i https://pypi.doubanio.com/simple --trusted-host pypi.doubanio.com`);
      //   }
      // }
      else if (pipy == "github") {
        $("#command pre").text(`pip install git+https://github.com/itlubber/scorecardpipeline.git`);
      }
      else {
        if (line == "offline") {
          $("#command pre").text('# 在线环境中运行\npip download -d site-packages/ scorecardpipeline\n# 离线环境运行\npip install --no-index --find-links=site-packages scorecardpipeline');
        }
        else {
          $("#command pre").text(`pip install scorecardpipeline`);
        }
      }
    }
  
    $(".quick-start .content-column .row div").click(function() {
      $(this).parent().children().removeClass("selected");
      $(this).addClass("selected");
      $("#command").attr($(this).parent().attr("id"), $(this).attr("id"));
      updateCommand();
    });
  
    $("#linux").click();
    $("#nouse").click();
    $("#online").click();
  
  </script>
</body>
</html>